<template>
	<view>
		<view class="listbox">
			<view class="listview flex ac">
				<image style="width: 42rpx;height: 42rpx;" src="../../static/icon/aa/phone.png"></image>
				<input class="searchbar-input" maxlength="11" :value="phone" type="number" @input='blurPhone'
					placeholder-style="color:#a6a7a8;
				font-size:29rpx;" placeholder="请输入手机号码" />
			</view>
			<view class="listview flex ac">
				<image style="width: 42rpx;height: 42rpx;" src="../../static/icon/aa/message.png"></image>
				<input class="searchbar-input" maxlength="11" type="number" @input="validate" placeholder-style="color:#a6a7a8;
				font-size:29rpx;" placeholder="请输入短信验证码" />
				<view v-if="codeTime>0" class="obtain" style="color:#B2B2B2;">{{codeTime}}</view>
				<view v-else class="obtain" @tap="getLoginCaptcha">获取验证码</view>
			</view>
		</view>

		<view v-if="inputvalue==false" class="buttom">提交</view>
		<view v-else class="buttoma" @tap="signin">提交</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	let app = getApp();
	export default {
		data() {
			return {
				inputvalue: false,
				codeTime: 0, //倒计时
				phone: '',
			}
		},

		onLoad(e) {
			this.phone = e.phonevalue
		},

		methods: {
			//输入手机号参数
			blurPhone(e) {
				this.phone = e.detail.value
				if (this.phone.length > 0) {
					if (this.codes.length > 0) {
						this.inputvalue = true
					}
				} else {
					this.inputvalue = false
				}
			},

			//输入验证码参数
			validate(e) {
				this.codes = e.detail.value
				if (this.codes.length > 0) {
					if (this.phone.length > 0) {
						this.inputvalue = true
					}
				} else {
					this.inputvalue = false
				}
			},

			//获取验证码
			async getLoginCaptcha() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
					})
					return
				}

				let apply = await request(`${getApp().globalData.http}send_code`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					phone: this.phone
				})
				if (apply.data.code == 0) {
					uni.showToast({
						title: '发送' + apply.data.message,
						icon: "none",
					})
					// 防止重复获取
					if (this.codeTime > 0) {
						return
					}
					// 倒计时
					this.codeTime = 60
					// 箭头函数可以直接拿到外面的this的内容
					let timer = setInterval(() => {
						if (this.codeTime >= 1) {
							this.codeTime--
							this.codeTime = this.codeTime
						} else {
							clearInterval(timer)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}

			},

			//提交
			async signin(e) {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						icon: "none",
					})
					return
				}
				if (this.codes == "") {
					uni.showToast({
						title: '请输入验证码',
						icon: "none",
					})
					return
				}

				let apply = await request(`${getApp().globalData.http}user/user_update`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "POST", {
					phone: this.phone,
					code: this.codes,
					token: app.globalData.token
				})
				if (apply.data.code == 0) {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
					setTimeout(function() {
						uni.navigateBack()
					}, 2000)
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}

			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f8;
	}

	.listbox {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		background-color: #ffffff;
	}

	.listview {
		height: 120rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.listview:last-child {
		border-bottom: none;
	}

	.searchbar-input {
		padding-left: 20rpx;
		flex: 1;
	}

	.obtain {
		margin-right: 20rpx;
		width: 160rpx;
		text-align: center;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 30rpx;
		color: #ff66b2;
	}

	.buttom {
		margin: 90rpx auto;
		width: 600rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		color: #ffffff;
		background-color: #BCD0FF;
		border-radius: 50rpx;
	}

	.buttoma {
		margin: 90rpx auto;
		width: 600rpx;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		font-size: 30rpx;
		color: #ffffff;
		background-color: #2461FF;
		border-radius: 50rpx;
	}
</style>